<template>
    <div class="warningbox">
        <div v-for="(item, index) in dataList" :key="index" class="bigbox" :style="{
            marginTop: index === 1 ? '10px' : '0'
        }">
            <div style="width: 120px;">
                <topBottomTit :title="item.title" :url="item.img" size="50" />
            </div>

            <div style="width: 100%;    display: flex;
    justify-content: space-between;
    flex-direction: column;" class="h">

                <div class="flex-sb-c databox mb-10">
                    <div class="todaybox">
                        <div>今</div>
                        <div>日</div>
                    </div>
                    <topBottomData :num="formatNumber(item.wait)" title="待处置" />
                    <topBottomData :num="formatNumber(item.already)" title="已处置" />
                    <topBottomData :num="formatNumber(item.transfer)" title="移交外省" class="mr-30" />
                </div>



                <div class="flex-sb-c databox">
                    <div class="todaybox" style="background-color: #dd6232;">
                        <div>近</div>
                        <div>30</div>
                        <div>天</div>
                    </div>
                    <topBottomData :num="formatNumber(item.wait)" title="待处置" />
                    <topBottomData :num="formatNumber(item.already)" title="已处置" />
                    <topBottomData :num="formatNumber(item.transfer)" title="移交外省" class="mr-30" />
                </div>

            </div>
        </div>
    </div>


</template>
<script setup>
import { ref } from 'vue';
import topBottomTit from './components/topBottomTit.vue';
import topBottomData from './components/topBottomData.vue';
import { formatNumber } from './config.js';
const dataList = ref([
    {
        img: new URL(`./assets/容器 20597@2x.png`, import.meta.url).href,
        title: '资金预警',
        wait: 6699,
        already: 69999,
        transfer: 69999,
    },
    {
        img: new URL(`./assets/容器@2x.png`, import.meta.url).href,
        title: '普通预警',
        wait: 6699,
        already: 69999,
        transfer: 69999,
    }
])
</script>
<style lang="scss" scoped>
@import './css/index.scss';

.warningbox {
    box-sizing: border-box;
    height: 100%;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .bigbox {
        padding: 5px;
        background-color: rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 49%;

    }

    .databox {
        border-radius: 5px;
        padding: 5px;
        background-color: rgba(255, 255, 255, 0.1);
        width: 100%;
        box-sizing: border-box;
        height: 100%;
    }

}

.todaybox {
    width: 32px;
    height: 100%;
    border-radius: 2px;
    background-color: #11BC97;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
</style>